<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { sessionLogList } from '../../../service/api'

const { appContext } = getCurrentInstance()
const proxy = appContext.config.globalProperties

const router = useRouter()

const current = ref(1)
const size = 100

const list = ref([])
const loading = ref(false)
const finished = ref(false)

const goDetail = (id) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}

const onLoad = () => {
  getList()
}

const getList = () => {
  sessionLogList({
    sessionId: proxy.$config.sessionId,
    current: current.value++,
    size
  }).then((res) => {
    res.sessionLogList.forEach((item) => {
      list.value.push(item)
    })
    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (res.sessionLogList.length < size) {
      finished.value = true
    }
  }).catch(err => {
    proxy.$toast(err)
  })
}

onMounted(() => {})
</script>

<template>
  <div class="page-history">
    <div class="tip">
      说明：仅展示近半年的会话记录
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="wrap"
        @click.stop="goDetail(item.sessionId)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="item van-hairline--bottom">
          <span>{{ item.createTime }}</span>
          <span class="next" />
        </div>
      </div>
    </van-list>
  </div>
</template>

<style lang="less">
.page-history {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  font-size: 0.28rem;
  color: #323233;
  .tip {
    text-align: center;
    font-size: 0.24rem;
    color: #999999;
    padding: 0.26rem 0;
  }
  .wrap {
    background-color: white;
    padding: 0 0.16rem;
    &:last-child .item.van-hairline--bottom {
      border: none;
    }
    .item {
      background-color: white;
      padding: 0.26rem 0.16rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .next {
        width: 0.12rem;
        height: 0.26rem;
        background-image: url("../../../assets/img/next.png");
        background-size: 100% 100%;
      }
    }
  }
}
</style>
